<script lang="ts" setup>
import { getDemoPage } from '@/api/demo/demo'
import { Settings as SettingsIcon } from '@vicons/carbon'
// import { usePagination } from '@/hooks/usePagination'
import { basicColumns } from './columns'
import type { DataTableColumn } from 'naive-ui'

const state = reactive({
	loading: false,
	pagination: {},
	form: {} as Demo,
	records: [] as Demo[]
})

const { loading, form, records, pagination } = toRefs(state)

const columns: ComputedRef<DataTableColumn<Demo>[]> = computed(() => [...basicColumns])

onMounted(() => {
	handleSelectOnClick()
})

const handleResetOnClick = () => {}

async function handleSelectOnClick() {
	state.loading = true
	const { data } = await getDemoPage()
	state.records = data.records
	state.loading = false
}

const handleInsertOnClick = () => {}

const handleUpdateOnClick = (row: Demo) => {}

const handleDeleteOnClick = (row: Demo) => {}

const handleCloseOnClick = () => {}
</script>
<template>
	<div>
		<div>
			<n-space>
				<n-form-item label="账号" label-placement="left" :show-feedback="false">
					<n-input v-model:value="form.A" size="small" />
				</n-form-item>
			</n-space>
			<n-space style="margin-top: 5px; display: flex; justify-content: center">
				<n-button @click="handleSelectOnClick" type="info">查询</n-button>
				<n-button @click="handleResetOnClick">重置</n-button>
			</n-space>
		</div>
		<div style="padding: 10px 0; display: flex; justify-content: space-between">
			<n-space>
				<n-button @click="handleInsertOnClick" size="small" type="info">新增</n-button>
			</n-space>
			<n-space>
				<n-tooltip placement="bottom">
					<template #trigger>
						<n-icon size="22">
							<SettingsIcon />
						</n-icon>
					</template>
					列设置
				</n-tooltip>
			</n-space>
		</div>
		<n-data-table
			table-layout="fixed"
			:bordered="false"
			:loading="loading"
			:columns="columns"
			:data="records"
			:pagination="pagination"
			remote
		/>
	</div>
</template>
